<template>
	<view class="content">
		<view class="header-bj">
			<view class="header flex-row">
				<view>
					<image class="fh" @tap="back" src="../../static/user/fh.png" mode="scaleToFill"></image>
				</view>
				<view>提现</view>
			</view>
			<view class="flex-column header-top">
				<view>当前可提现金额</view>
				<view>362556.36</view>
			</view>
		</view>
		<view class="detail">
			<view class="top30"></view>
			<view class="bank">
				<view class="bank-info">
					<view class="flex-row flex-content-between">
						<view class="yinhang">到账银行卡</view>
						<view class="flex-row addbank flex-item-center" v-if="bankList.length==0&&bankInfo==null" @tap="toAddBank">
							<view>添加银行卡</view>
							<image src="../../static/user/user-you.png" mode="scaleToFill"></image>
						</view>
						<view v-if="bankInfo!=null" class="flex-row addbanks flex-item-center" @tap="changeBank">
							<image src="../../static/user/bank-img.png" mode="scaleToFill"></image>
							<view>中国银行（8677）</view>
							<image src="../../static/user/user-you.png" mode="scaleToFill"></image>
						</view>
					</view>
				</view>
			</view>
			<view class="tx">
				<view class="tx-txt flex-column">
					<view class="flex-row flex-content-between tx-txt-action flex-item-center">
						<view>提现金额</view>
						<view @tap="toWithLog">提现明细</view>
					</view>
					<view class="tx-txt-input flex-row flex-content-between flex-item-center">
						<view class="flex-row tx-txt-input-detal">
							<view>￥</view>
							<input type="text" v-model="price" placeholder="请输入提现金额" placeholder-class="tx-txt-input-p"/>
						</view>
						<view>全部</view>
					</view>
					<view class="ts">提现手续费0%</view>
				</view>
			</view>
			<view class="btn">提现</view>
		</view>
		<uni-popup ref="changeBank" type="bottom">
			<view class="body-popup">
				<view class="body-popup-top">
					<view class="flex-row flex-content-between">
						<view class="body-popup-header">选择到账银行卡</view>
						<image @tap="closeBankList" class="body-popup-header-img" src="../../static/order/x.png" mode="scaleToFill"></image>
					</view>
					<view class="henxian"></view>
					<scroll-view :scroll-y="true" class="body-popup-scroll">
						<view class="ones flex-column" v-for="bank in bankList">
							<view class="flex-row flex-content-between flex-item-center">
								<view class="flex-row">
									<image class="bank-img" src="../../static/order/yh.png" mode="scaleToFill"></image>
									<view class="flex-column bank-txt">
										<view>中国银行 储蓄卡 </view>
										<view>（2566）</view>
									</view>
								</view>
								<image class="dagou" v-if="bank.selected" src="../../static/bank/gou.png" mode="scaleToFill"></image>
							</view>
						</view>
						<view class="ones" @tap="toAddBank">
							<view class="flex-row flex-content-between">
								<view class="flex-row flex-item-center">
									<image class="bank-img-1" src="../../static/order/ka.png" mode="scaleToFill"></image>
									<view class="bank-txt1">使用新卡提现</view>
								</view>
								<image class="img-1" src="../../static/index/you.png" mode="scaleToFill"></image>
							</view>
							
						</view>
					</scroll-view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				price:"",//输入的金额
				bankInfo:{},//选择的银行卡详情
				bankList:[
					{
						selected:true
					},
					{
						selected:false
					},
					{
						selected:false
					},
					{
						selected:false
					},
					{
						selected:false
					},
					{
						selected:false
					},
					{
						selected:false
					},
					{
						selected:false
					},
					{
						selected:false
					},
					{
						selected:false
					},
					{
						selected:false
					}
				],//可选择的银行卡列表
			}
		},
		methods:{
			//返回上一页
			back(){
				uni.navigateBack({
					delta:1
				})
			},
			//跳转到添加银行卡
			toAddBank(){
				uni.navigateTo({
					url:'/pages/bank/add_bank'
				})
			},
			//显示选择银行弹框
			changeBank(){
				this.$refs.changeBank.open()
			},
			//关闭弹框
			closeBankList(){
				this.$refs.changeBank.close();
			},
			//跳转到提现明细
			toWithLog(){
				uni.navigateTo({
					url:'/pages/user/withdrawal_list'
				})
			}
		}
	}
</script>

<style lang="scss">
	.img-1{
		width: 18rpx;
		height: 30rpx;
	}
	.bank-txt1{
		font-size: 30rpx;
		font-family: PingFang SC-Bold, PingFang SC;
		font-weight: bold;
		color: #333333;
		margin-left: 36rpx;
	}
	.bank-img-1{
		width: 50rpx;
		height: 39rpx;
	}
	.bank-txt{
		margin-left: 36rpx;
		>view{
			font-size: 32rpx;
			font-family: PingFang SC-Bold, PingFang SC;
			font-weight: bold;
			color: #333333;
		}
	}
	.bank-img{
		width: 50rpx;
		height: 50rpx;
	}
	.dagou{
		width: 36rpx;
		height: 30rpx;
	}
	.ones{
		width: 100%;
		height: 90rpx;
		margin-top: 80rpx;
	}
	.body-popup-scroll{
		width: 100%;
		height: 640rpx;
		// background-color: #ff557f;
	}
	.henxian{
		width: 690rpx;
		height: 0px;
		opacity: 1;
		border-bottom: 1rpx solid #EEEEEE;
		margin-top: 52rpx;
	}
	.body-popup-header-img{
		width: 28rpx;
		height: 28rpx;
		margin-top: 5rpx;
	}
	.body-popup-header{
		font-size: 36rpx;
		font-family: PingFang SC-Bold, PingFang SC;
		font-weight: bold;
		color: #333333;
		margin-left: 217rpx;
	}
	.body-popup-top{
		padding-top: 54rpx;
		margin-left: 32rpx;
		margin-right: 50rpx;
	}
	.body-popup{
		width: 750rpx;
		height: 836rpx;
		background: #FFFFFF;
		border-radius: 40rpx 40rpx 0px 0px;
		opacity: 1;
	}
	
	
	
	
	
	
	.btn{
		width: 690rpx;
		height: 90rpx;
		background: #F9E3AD;
		border-radius: 45rpx 45rpx 45rpx 45rpx;
		opacity: 1;
		font-size: 30rpx;
		font-family: PingFang SC-Bold, PingFang SC;
		font-weight: bold;
		color: #8D6400;
		text-align: center;
		line-height: 90rpx;
		margin-top: 50rpx;
	}
	.ts{
		font-size: 26rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #999999;
		margin-top: 24rpx;
	}
	.tx-txt-input-detal{
		>view{
			font-size: 40rpx;
			font-family: PingFang SC-Bold, PingFang SC;
			font-weight: bold;
			color: #333333;
		}
		>input{
			font-size: 40rpx;
			font-family: PingFang SC-Bold, PingFang SC;
			font-weight: bold;
			color: #333333;
			margin-left: 12rpx;
		}
	}
	.tx-txt-input-p{
		font-size: 40rpx;
		font-family: PingFang SC-Bold, PingFang SC;
		font-weight: bold;
		color: #999999;
	}
	.tx-txt-input{
		width: 630rpx;
		height: 80rpx;
		border-bottom: 1px solid #D8D8D8;
		margin-top: 58rpx;
		padding-bottom: 24rpx;
		>view{
			font-size: 26rpx;
			font-family: PingFang SC-Regular, PingFang SC;
			font-weight: 400;
			color: #002BFF;
		}
	}
	.tx-txt-action{
		>view:nth-child(1){
			font-size: 28rpx;
			font-family: PingFang SC-Bold, PingFang SC;
			font-weight: bold;
			color: #333333;
		}
		>view:nth-child(2){
			width: 140rpx;
			height: 52rpx;
			background: #FFFFFF;
			border-radius: 29rpx 29rpx 29rpx 29rpx;
			opacity: 1;
			border: 1px solid #8D6400;
			font-size: 26rpx;
			font-family: PingFang SC-Regular, PingFang SC;
			font-weight: 400;
			color: #8D6400;
			text-align: center;
			line-height: 52rpx;
		}
	}
	.tx-txt{
		padding-top: 30rpx;
		margin-left: 30rpx;
		margin-right: 30rpx;
	}
	.tx{
		width: 690rpx;
		// height: 315rpx;
		background: #FFFFFF;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		opacity: 1;
		margin-top: 23rpx;
		padding-bottom: 40rpx;
	}
	.addbanks{
		>view:nth-child(2){
			font-size: 28rpx;
			font-family: PingFang SC-Bold, PingFang SC;
			font-weight: bold;
			color: #333333;
			margin-left: 16rpx;
		}
		>image:nth-child(1){
			width: 34rpx;
			height: 34rpx;
		}
		>image:nth-child(3){
			width: 14rpx;
			height: 23rpx;
			margin-left: 13rpx;
		}
	}
	.addbank{
		>view{
			font-size: 28rpx;
			font-family: PingFang SC-Bold, PingFang SC;
			font-weight: bold;
			color: #333333;
		}
		>image{
			width: 14rpx;
			height: 23rpx;
			margin-left: 13rpx;
		}
	}
	.yinhang{
		font-size: 28rpx;
		font-family: PingFang SC-Bold, PingFang SC;
		font-weight: bold;
		color: #333333;
	}
	.bank-info{
		margin-left: 30rpx;
		margin-right: 30rpx;
	}
	.bank{
		width: 690rpx;
		// height: 110rpx;
		background: #FFFFFF;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		opacity: 1;
		padding-top: 35rpx;
		padding-bottom: 35rpx;
	}
	.detail{
		width: 690rpx;
		margin-left: 30rpx;
		margin-right: 30rpx;
	}
	.header-top{
		margin-top: 70rpx;
		>view:nth-child(1){
			font-size: 26rpx;
			font-family: PingFang SC-Regular, PingFang SC;
			font-weight: 400;
			color: #8D6400;
			text-align: center;
		}
		>view:nth-child(2){
			font-size: 40rpx;
			font-family: PingFang SC-Bold, PingFang SC;
			font-weight: bold;
			color: #333333;
			text-align: center;
			margin-top: 14rpx;
		}
	}
	.fh{
		width: 20rpx;
		height: 36rpx;
	}
	.header{
		padding-top: 61rpx;
		padding-left: 30rpx;
		>view:nth-child(1){
			width: 80rpx;
			height: 40rpx;
		}
		>view:nth-child(2){
			width: calc(750rpx - 160rpx - 60rpx);
			font-size: 34rpx;
			font-family: PingFang SC-Bold, PingFang SC;
			font-weight: bold;
			color: #333333;
			text-align: center;
		}
	}
	.header-bj{
		width: 750rpx;
		height: 416rpx;
		/* #ifdef MP */
		background-image: url('http://ws.facai.maowenke.cn/img/tx-bj.png');
		/* #endif */
		/* #ifndef MP */
		background-image: url('../../static/user/tx-bj.png');
		/* #endif */
		background-size: 100%;
	}
</style>